<template>
  <div class="progress-bar">
    <div class="bar">
      <div class="progress" :style="{ width: (current / max) * 100 + '%' }"></div>
    </div>
    <div class="surplus-number">还剩{{ max - current }}件</div>
  </div>
</template>

<script>
export default {
  props: {
    // 最大数量
    max: {
      type: Number,
      default: 0
    },
    // 当前数量
    current: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="less" scoped>
@import "./../../styles/variable";
@import "./../../styles/common";

.progress-bar {
  align-items: center;
  display: flex;
  justify-content: center;
  .bar {
    border-radius: 6px;
    border: 1px solid @font-color-pink;
    width: 70%;
    height: 10px;
    overflow: hidden;
    .progress {
      .transition-fast;
      background: @font-color-pink-light;
      width: 0%;
      height: 100%;
    }
  }
  .surplus-number {
    color: @font-color-grey;
    font-size: 14px;
    line-height: 14px;
    width: 30%;
    margin-left: 10px;
  }
}
</style>
